<template>
      <el-form :model="form" ref="queryRef" :inline="true">
        <el-form-item label="用户ID" prop="userId">
          <el-input
            v-model="queryParams.keyword"
            placeholder="请输入"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
  
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        max-height="750"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="用户头像">
          <template #default="scope">
              <span class="avatar" v-if="scope.row.faceURL === ''">
                  {{scope.row.nickname[0]}}
              </span>
              <div v-else>
                <img :src="scope.row.faceURL" alt="light" />
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" ></el-table-column>
        <el-table-column prop="userID" label="用户ID" show-overflow-tooltip></el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          layout="prev, pager, next"
          v-model:page="pageObj.pageNumber"
          v-model:limit="pageObj.showNumber"
          @pagination="getList"
          calss="selectUserDialog"
      />
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { getUserList } from "@/api/chat/user";
  
  const props = defineProps({
    modelValue: Boolean,
    title: {
      type: String,
      default: '选择用户'
    },
    form:{
      type: Object,
      default: () => {}
    },
    // 当selectChangese为true时，当选中用户后，会直接返回选中的用户
    selectChange: {
      type: Boolean,
      default: false
    }
  })
  
  const emit = defineEmits(['update:modelValue', 'submit'])
  
  const dialogVisible = ref(false)
  const data = reactive({
   queryParams: {
    keyword:undefined
   },
   pageObj:{
      pageNumber: 1,
      showNumber: 10,
   },
  });
  const { queryParams, pageObj } = toRefs(data);
  const multipleSelection = ref([])
  const tableData = ref([])
  const total = ref(0)
  const multipleTable = ref()
  
  function handleSelectionChange(val){
    multipleSelection.value = val;
    if(props.selectChange){
      emit('submit', multipleSelection.value)
    }
  }
  function handleCancelSelect (value){
    const newArray = multipleSelection.value.filter(item => item.nickname !== value)
    // 清除所有已选中项
    multipleTable.value.clearSelection();
    // 重新选中新数组中的每一项
    newArray.forEach(row => {
      multipleTable.value.toggleRowSelection(row, true);
    });
  }
  
  function handleQuery(){
    getList()
  }
  
  function submit(){
    emit('submit', multipleSelection.value)
    dialogVisible.value = false
  }
  
  function cancel(){
    dialogVisible.value = false
  }
   /** 查询用户列表 */
 function getList() {
   const parmas = {
    pagination: data.pageObj,
    normal: 1,
    keyword: data.queryParams.keyword
   }
   getUserList(parmas).then(response => {
    tableData.value = response.data.users;
    total.value = response.data.total;
   });
 }
 /** 清空选中 */
 function handleReset(){
   multipleTable.value.clearSelection()
 }
 getList()
 defineExpose({submit, handleCancelSelect})
  // 同步控制弹窗显示
  watch(() => props.modelValue, (newVal) => {
    dialogVisible.value = newVal
    if (newVal) {
      handleReset()
    }
  })
  
  watch(dialogVisible, (newVal) => {
    emit('update:modelValue', newVal)
  })
</script>
<style scoped>
</style>